<template>
  <div class="wrap">
    <!--最大的空间div-->
    <div class="cube">
      <!--正方体的box-->
      <!--这个是大的正方体的六面-->
      <div
        v-for="(suffix, index) in claSuffixs"
        :key="index"
        :class="'out-' + suffix"
      >
        <img :src="picArr[index]" class="pic" />
      </div>

      <!--这个是小的正方体的六面-->
      <span
        v-for="(suffix, index) in claSuffixs"
        :key="index + 6"
        :class="'in-' + suffix"
      >
        <img :src="picArr[index + 6]" class="in_pic" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      claSuffixs: ["front", "back", "left", "right", "top", "bottom"], // 方便定位类名样式
      oPicArr: ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"], // 外层图片数组
      iPicArr: ["7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg"], // 内层图片数组
    };
  },
  computed: {
    picArr() {
      // let prefix = "../images/rotate/";
      let arr = [];
      let p = /^(http|https):\/\/([\w.]+\/?)\S*/;
      for (let item of [...this.oPicArr, ...this.iPicArr]) {
        // 判断该元素是否以 http or https 开头
        if (p.test(item)) {
          // 网络图片直接添加
          arr.push(item);
        } else {
          // 本地图片, 处理路径问题
          arr.push(require(`../images/rotate/${item}`));
        }
      }
      // console.log("arr :>> ", arr);
      return arr;
    },
  },
  methods: {},
};
</script>

<style lang="stylus" scoped>
$outBoxSide = 8vh; // 外层图片的边长
$outPicSitePlu = 4vh; // 外层图片的位置1
$outPicSiteMin = -4vh; // 外层图片的位置2
$inBoxSide = 4vh; // 内层图片的边长
$inPicSitePlu = 2vh; // 内层图片的位置1
$inPicSiteMin = -2vh; // 内层图片的位置2
$padPlu = 8vh; // 当鼠标滑过外层图片时,改变外层图片的空间位置(达到 由内到外 的扩张效果)
$padMin = -8vh;

// 动画关键帧，翻滚吧！牛宝宝
@keyframes move {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
  }
}

.wrap {
  margin-top: 100px; /* 上外边距设置 */
  width: $outBoxSide; /* 给他一个宽度 */
  perspective: 1000px; /* 景深设置，视图距元素的距离  相当于摄像机 */
  position: fixed;
  bottom: 3.5vh;
  right: 5vh;
}

.cube {
  width: $outBoxSide; /* 设置宽度 */
  height: $outBoxSide; /* 设置高度 */
  transform-style: preserve-3d; /* 开启这个，表示所有元素在3D平面呈现 */
  transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); /* 一开始的角度，视觉上看一下 */
  animation: move 17s infinite linear; /* 启动动画的名字、时长、无限循环、匀速播放 */
}

/* 外层大的正方体的设置 */
.cube div {
  width: 100%; /* 设置的宽度和父级一样 */
  height: 100%; /* 设置的高度一样 */
  border-radius: 20px; /* 设置一下圆角 */
  position: absolute; /* 开启绝对定位，这样就全部叠在一起了 */
  opacity: 0.8;
  transition: transform 0.3s ease-in; /* 过度变形的时间设置和快慢设置 */
}

.pic {
  width: $outBoxSide;
  height: $outBoxSide;
  border: 1px;
  border-radius: 10%;
}

/* 外层设置大的正方体的六个面的位置 */
.cube div.out-front {
  transform: translateZ($outPicSitePlu); /* 设置前面的那一面的Z轴往前移 */
}

.cube div.out-back {
  transform: translateZ($outPicSiteMin) rotateY(180deg); /* 设置后面的那一面的Z轴往后移，Y轴转一下。使得的背面的那一面是面向背面的 */
}

.cube div.out-left {
  transform: translateX($outPicSiteMin) rotateY(-90deg); /* 设置左边的那一面在X轴上退一些，向左转 */
}

.cube div.out-right {
  transform: translateX($outPicSitePlu) rotateY(90deg); /* 设置右边的那一面在X轴上进一些，向右转 */
}

.cube div.out-top {
  transform: translateY($outPicSiteMin) rotateX(90deg); /* 设置上边的那一面在Y轴上去一些，向后翻转 */
}

.cube div.out-bottom {
  transform: translateY($outPicSitePlu) rotateX(-90deg); /* 设置下边的那一面在X轴下去一些，向前翻 */
}

/* 内层小的正方体的设置 */
.cube span {
  display: block; /* 先转变为块级元素 */
  width: $inBoxSide; /* 设置宽度，因为是小的正方体 */
  height: $inBoxSide; /* 设置高度 */
  position: absolute; /* 开启绝对定位 */
  top: $inPicSitePlu; /* 因为高度是100，是原来的一半。要居中就上下都一样的50 */
  left: $inPicSitePlu; /* 同理，因为宽度是100，是原来的一半。要居中就左右都一样的50 */
}

/* 内层小的正方体图片的样式设置 */
.cube .in_pic {
  height: $inBoxSide;
  width: $inBoxSide;
}

/* 设置内层小的正方体的六个面的位置 */
.cube span.in-front {
  transform: translateZ($inPicSitePlu); /* 设置前面的那一面的Z轴往前移 */
}

.cube span.in-back {
  transform: translateZ($inPicSiteMin) rotateY(180deg); /* 设置后面的那一面的Z轴往后移，Y轴转一下。使得的背面的那一面是面向背面的 */
}

.cube span.in-left {
  transform: translateX($inPicSiteMin) rotateY(-90deg); /* 设置左边的那一面在X轴上退一些，向左转 */
}

.cube span.in-right {
  transform: translateX($inPicSitePlu) rotateY(90deg); /* 设置右边的那一面在X轴上进一些，向右转 */
}

.cube span.in-top {
  transform: translateY($inPicSiteMin) rotateX(90deg); /* 设置上边的那一面在Y轴上去一些，向后翻转 */
}

.cube span.in-bottom {
  transform: translateY($inPicSitePlu) rotateX(-90deg); /* 设置下边的那一面在X轴下去一些，向前翻 */
}

/* 当鼠标滑过这个div的时候。过渡变化下面的事件 */
.wrap:hover .cube div.out-front {
  transform: translateZ($padPlu); /* 当鼠标滑过，前面就往前凸 */
}

.wrap:hover .cube div.out-back {
  transform: translateZ($padMin) rotateY(180deg); /* 当鼠标滑过，前面就往后跑，加了旋转是因为一开始是平面的，不加会变会原样 */
}

.wrap:hover .cube div.out-left {
  transform: translateX($padMin) rotateY(-90deg); /* 当鼠标滑过，左面就往左飞 */
}

.wrap:hover .cube div.out-right {
  transform: translateX($padPlu) rotateY(90deg); /* 当鼠标滑过，右面就往右进 */
}

.wrap:hover .cube div.out-top {
  transform: translateY($padMin) rotateX(90deg); /* 当鼠标滑过，上面就往上冒 */
}

.wrap:hover .cube div.out-bottom {
  transform: translateY($padPlu) rotateX(-90deg); /* 当鼠标滑过，下面就往下弹 */
}
</style>